<template>
	<div :class="['app-editor-container', 'app-switch', `app-switch-${name}`]">
		<a-switch
			:checked="curValue"
			:size="size"
			:disabled="disabled || readOnly"
			@change="onChange"
			:checkedChildren="checkedChildren"
			:unCheckedChildren="unCheckedChildren"
		/>
	</div>
</template>

<script setup lang="ts">
import { IEvent, IParam } from '@/core';
import { computed, Ref } from 'vue';
import { switchProps } from './switch';
import { useEditorTypeParams } from '@/hooks/use-editor';
interface EditorEmit {
	(name: 'component-action', value: IEvent<string>): void;
}
const props = defineProps(switchProps);
const emit = defineEmits<EditorEmit>();
// 类型校验
const { validateConfig } = useEditorTypeParams();
validateConfig();
const checkedChildren: Ref<string> = ref(''); //选中时显示文字
const unCheckedChildren: Ref<string> = ref(''); //未选中时显示文字
const curValue: Ref<boolean> = computed(() => {
	if (!props.value) {
		return false;
	} else {
		return true;
	}
});
const onChange = (value: boolean) => {
	emit('component-action', {
		name: `${props.name}`,
		action: 'valueChange',
		data: value ? 1 : 0,
	});
};

onMounted(() => {
	if (props.dicData && Array.isArray(props.dicData)) {
		const result_check = props.dicData.find((item: IParam) => {
			return item.value === 1;
		});
		const result_uncheck = props.dicData.find((item: IParam) => {
			return item.value === 0;
		});
		if (result_check) {
			checkedChildren.value = result_check.label;
		}
		if (result_uncheck) {
			unCheckedChildren.value = result_uncheck.label;
		}
	}
});
</script>
